<template>
    <div id="app" class="app">
        <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned" :designer-config="designerConfig">
            <!-- 自定义按钮插槽演示 -->
            <template #customToolButtons>
                <el-button type="text" @click="dialogFormVisible = true"><i class="el-icon-finished" />保存</el-button>
            </template>
        </v-form-designer>
        <!-- 自定义按钮插槽演示 -->
        <el-dialog title="保存表单" :visible.sync="dialogFormVisible">
            <el-form :model="data" ref="data" :rules="rule" >
                <el-form-item label="表单名称" prop="fromName">
                    <el-input v-model="data.fromName"></el-input>
                </el-form-item>
                <el-form-item label="表单介绍" prop="fromDesc">
                    <el-input type="textarea" v-model="data.fromDesc" maxlength="40" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="
                        saveFormJson('data');
                        dialogFormVisible = false;
                    "
                    >确 定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { insert } from '@/api/from.js/';
export default {
    name: 'App',
    data() {
        return {
            fieldListApi: {
                URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
                labelKey: 'fieldLabel',
                nameKey: 'fieldName'
            },
            data: {
                id:0,
                fromName: '',
                fromJson: '',
                fromDesc: '',
                delete: 0,
                Name: ''
            },
            rule: {
                fromName: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
                fromDesc: [
                    { required: true, message: '请输入表单介绍', trigger: 'blur' },
                    { min: 1, max: 40, message: '长度在 1到 40 个字符', trigger: 'blur' }
                ]
            },
            dialogFormVisible: false,
            testBanned: [
                //'sub-form',
                //'alert',
            ],

            designerConfig: {
                languageMenu: true,
                externalLink: false,
                formTemplates: false,
                eventCollapse: false,
                clearDesignerButton: false,
                previewFormButton: false

                //presetCssCode: '.abc { font-size: 16px; }',
            }
        };
    },
    methods: {
        saveFormJson(data) {
        this.$refs[data].validate((valid) => {
          if (valid) {
            //alert('submit!');
            let formJson = this.$refs.vfDesigner.getFormJson();
            //TODO: 将formJson提交给后端保存接口，需自行实现！！
            console.log(formJson.widgetList);
            this.data.fromJson = JSON.stringify(formJson);
            this.data.name=localStorage.getItem('UserName')
            console.log(this.data)
            insert(this.data).then((res) => {
                if(res.code==200)
                {
                    this.$message.success(res.message);
                    this.$router.push('/FromShow')
                }else{
                    this.$message.info(res.message);
                }
                
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
            
        }
    }
};
</script>
<style>
.app {
    height: 100%;
}
</style>